<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>统计分析 - 应急响应中心管理系统</title>
    <link rel="stylesheet" th:href="@{/css/main.css}">
    <link rel="stylesheet" th:href="@{/lib/bootstrap/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/lib/bootstrap-icons/font/bootstrap-icons.css}">
    <link rel="stylesheet" th:href="@{/css/main.css}">
    <th:block th:replace="~{fragments/header :: navbarStyles}"></th:block>
    <script th:src="@{/lib/npm/chart.js}"></script>
    
    <!-- 高德地图API -->
    <script type="text/javascript">
      window._AMapSecurityConfig = {
        securityJsCode: "bd7cfe5378f27ad4720f0279a1b184a7",
      };
    </script>
    <script src="https://webapi.amap.com/maps?v=2.0&key=9c44b0918d292a11356bd716509f09c3"></script>
    
    <style>
        .statistics-container {
            padding: 20px 0;
        }
        
        /* 导航栏样式修复 */
        .navbar-brand {
            display: flex;
            align-items: center;
        }
        
        .navbar-logo {
            height: 40px;
            margin-right: 10px;
        }
        
        /* 确保导航栏始终水平排列 */
        .navbar .container {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .navbar-nav {
            display: flex;
            list-style: none;
            margin: 0;
            padding: 0;
            flex-direction: row;
        }
        
        .nav-item {
            margin-left: 1.5rem;
        }
        
        .nav-link {
            color: #fff;
            text-decoration: none;
            transition: color 0.3s ease;
        }
        
        .nav-link:hover {
            color: #3498db;
        }
        
        .nav-link.active {
            color: #3498db;
            font-weight: bold;
        }
        
        .filter-section {
            background: #f8f9fa;
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 20px;
        }
        
        .stats-card {
            background: white;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            border-left: 4px solid #007bff;
        }
        
        .stats-card h5 {
            color: #333;
            margin-bottom: 15px;
            font-weight: 600;
        }
        
        .metric-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 0;
            border-bottom: 1px solid #eee;
        }
        
        .metric-item:last-child {
            border-bottom: none;
        }
        
        .metric-label {
            font-weight: 500;
            color: #666;
        }
        
        .metric-value {
            font-weight: 600;
            color: #333;
        }
        
        .chart-container {
            background: white;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            height: 400px;
            position: relative;
        }
        
        .chart-container canvas {
            max-height: 350px !important;
            width: 100% !important;
        }
        
        .chart-title {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 15px;
            color: #333;
        }
        
        .loading {
            text-align: center;
            padding: 40px;
            color: #666;
        }
        
        .error {
            background: #f8d7da;
            color: #721c24;
            padding: 15px;
            border-radius: 4px;
            margin-bottom: 20px;
        }
        
        .success {
            background: #d4edda;
            color: #155724;
            padding: 15px;
            border-radius: 4px;
            margin-bottom: 20px;
        }
        
        .nav-tabs .nav-link {
            color: #666;
            border: none;
            padding: 10px 20px;
        }
        
        .nav-tabs .nav-link.active {
            color: #007bff;
            background: none;
            border-bottom: 2px solid #007bff;
        }
        
        .tab-content {
            padding: 20px 0;
        }
        
        .summary-stats {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 15px;
            margin-bottom: 30px;
        }
        
        .summary-card {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 20px;
            border-radius: 8px;
            text-align: center;
        }
        
        .summary-card h3 {
            font-size: 2rem;
            margin: 0;
            font-weight: 700;
        }
        
        .summary-card p {
            margin: 5px 0 0 0;
            opacity: 0.9;
        }
        
        .summary-card.success {
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
        }
        
        .summary-card.warning {
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
        }
        
        .summary-card.info {
            background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
        }
        
        /* 地图容器样式 */
        #geographicMap {
            height: 500px;
            border-radius: 8px;
            overflow: hidden;
            position: relative;
        }
        
        .map-loading {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            color: #666;
            z-index: 1000;
        }
        
        .map-controls {
            position: absolute;
            top: 10px;
            right: 10px;
            z-index: 1001;
            background: white;
            border-radius: 4px;
            padding: 10px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        
        .map-controls button {
            margin: 2px;
            padding: 5px 10px;
            border: 1px solid #ddd;
            border-radius: 3px;
            background: white;
            cursor: pointer;
            font-size: 12px;
        }
        
        .map-controls button:hover {
            background: #f8f9fa;
        }
        
        .map-controls button.active {
            background: #007bff;
            color: white;
            border-color: #007bff;
        }
        
        /* 覆盖main.css的响应式设计，确保导航栏始终水平排列 */
        @media (max-width: 768px) {
            .navbar .container {
                flex-direction: row !important;
                align-items: center !important;
            }
            
            .navbar-nav {
                margin-top: 0 !important;
                flex-direction: row !important;
                flex-wrap: wrap;
            }
            
            .nav-item {
                margin-left: 0.5rem !important;
                margin-bottom: 0 !important;
            }
            
            .nav-link {
                padding: 0.5rem 0.25rem;
                font-size: 0.9rem;
            }
        }
    </style>
</head>
<body>
    <div th:replace="~{fragments/header :: navbar}"></div>
    <div class="container statistics-container">
        <div class="row">
            <div class="col-12">
                <h2><i class="bi bi-graph-up"></i> 统计分析</h2>
                <p class="text-muted">全面分析应急响应数据，优化资源配置和响应效率</p>
            </div>
        </div>

        <!-- 时间筛选器 -->
        <div class="filter-section">
            <div class="row align-items-end">
                <div class="col-md-3">
                    <label class="form-label">开始时间</label>
                    <input type="datetime-local" class="form-control" id="startDate">
                </div>
                <div class="col-md-3">
                    <label class="form-label">结束时间</label>
                    <input type="datetime-local" class="form-control" id="endDate">
                </div>
                <div class="col-md-2">
                    <label class="form-label">时间粒度</label>
                    <select class="form-select" id="timePeriod">
                        <option value="daily">按天</option>
                        <option value="hourly">按小时</option>
                        <option value="weekly">按周</option>
                        <option value="monthly">按月</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <button class="btn btn-primary w-100" onclick="loadStatistics()">
                        <i class="bi bi-search"></i> 查询
                    </button>
                </div>
                <div class="col-md-2">
                    <button class="btn btn-outline-secondary w-100" onclick="loadComprehensiveDashboard()">
                        <i class="bi bi-dashboard"></i> 综合仪表盘
                    </button>
                </div>
            </div>
        </div>

        <!-- 错误/成功消息 -->
        <div id="messageContainer"></div>

        <!-- 导航标签 -->
        <ul class="nav nav-tabs" id="statisticsTabs" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="nav-link active" id="overview-tab" data-bs-toggle="tab" data-bs-target="#overview" type="button" role="tab">
                    <i class="bi bi-pie-chart"></i> 事件概览
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="trends-tab" data-bs-toggle="tab" data-bs-target="#trends" type="button" role="tab">
                    <i class="bi bi-graph-up"></i> 趋势分析
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="efficiency-tab" data-bs-toggle="tab" data-bs-target="#efficiency" type="button" role="tab">
                    <i class="bi bi-speedometer2"></i> 响应效率
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="resources-tab" data-bs-toggle="tab" data-bs-target="#resources" type="button" role="tab">
                    <i class="bi bi-truck"></i> 资源利用
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="personnel-tab" data-bs-toggle="tab" data-bs-target="#personnel" type="button" role="tab">
                    <i class="bi bi-people"></i> 人员绩效
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="geographic-tab" data-bs-toggle="tab" data-bs-target="#geographic" type="button" role="tab">
                    <i class="bi bi-geo-alt"></i> 地理分布
                </button>
            </li>
        </ul>

        <!-- 标签内容 -->
        <div class="tab-content" id="statisticsTabContent">
            <!-- 事件概览 -->
            <div class="tab-pane fade show active" id="overview" role="tabpanel">
                <div class="summary-stats" id="overviewSummary">
                    <!-- 概览统计卡片将在这里动态生成 -->
                </div>
                
                <div class="row">
                    <div class="col-md-6">
                        <div class="chart-container">
                            <div class="chart-title">事件状态分布</div>
                            <canvas id="eventStatusChart"></canvas>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="chart-container">
                            <div class="chart-title">事件类型分布</div>
                            <canvas id="eventTypeChart"></canvas>
                        </div>
                    </div>
                </div>
                
                <div class="row">
                    <div class="col-md-6">
                        <div class="chart-container">
                            <div class="chart-title">事件严重程度分布</div>
                            <canvas id="eventSeverityChart"></canvas>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="chart-container">
                            <div class="chart-title">事件来源分布</div>
                            <canvas id="eventSourceChart"></canvas>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 趋势分析 -->
            <div class="tab-pane fade" id="trends" role="tabpanel">
                <div class="chart-container">
                    <div class="chart-title">事件趋势分析</div>
                    <canvas id="eventTrendChart"></canvas>
                </div>
            </div>

            <!-- 响应效率 -->
            <div class="tab-pane fade" id="efficiency" role="tabpanel">
                <div class="summary-stats" id="efficiencySummary">
                    <!-- 效率统计卡片将在这里动态生成 -->
                </div>
                
                <div class="row">
                    <div class="col-md-6">
                        <div class="chart-container">
                            <div class="chart-title">响应时间分布</div>
                            <canvas id="responseTimeChart"></canvas>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="chart-container">
                            <div class="chart-title">按事件类型的响应时间</div>
                            <canvas id="responseTimeByTypeChart"></canvas>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 资源利用 -->
            <div class="tab-pane fade" id="resources" role="tabpanel">
                <div class="summary-stats" id="resourceSummary">
                    <!-- 资源统计卡片将在这里动态生成 -->
                </div>
                
                <div class="row">
                    <div class="col-md-6">
                        <div class="chart-container">
                            <div class="chart-title">资源状态分布</div>
                            <canvas id="resourceStatusChart"></canvas>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="chart-container">
                            <div class="chart-title">资源类型分布</div>
                            <canvas id="resourceTypeChart"></canvas>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 人员绩效 -->
            <div class="tab-pane fade" id="personnel" role="tabpanel">
                <div class="summary-stats" id="personnelSummary">
                    <!-- 人员统计卡片将在这里动态生成 -->
                </div>
                
                <div class="row">
                    <div class="col-md-6">
                        <div class="chart-container">
                            <div class="chart-title">人员状态分布</div>
                            <canvas id="personnelStatusChart"></canvas>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="chart-container">
                            <div class="chart-title">角色分布</div>
                            <canvas id="personnelRoleChart"></canvas>
                        </div>
                    </div>
                </div>
                
                <div class="chart-container">
                    <div class="chart-title">人员工作量统计</div>
                    <canvas id="personnelWorkloadChart"></canvas>
                </div>
            </div>

            <!-- 地理分布 -->
            <div class="tab-pane fade" id="geographic" role="tabpanel">
                <div class="chart-container">
                    <div class="chart-title">事件地理分布</div>
                    <div id="geographicMap">
                        <div class="map-loading">
                            <i class="bi bi-geo-alt" style="font-size: 3rem;"></i>
                            <p>正在加载地图...</p>
                        </div>
                        <div class="map-controls">
                            <button onclick="toggleHeatmap()" id="heatmapBtn" class="active">热力图</button>
                            <button onclick="toggleMarkers()" id="markersBtn">标记点</button>
                            <button onclick="resetMapView()">重置视图</button>
                        </div>
                    </div>
                </div>
                
                <div class="chart-container">
                    <div class="chart-title">热点区域统计</div>
                    <canvas id="hotspotChart"></canvas>
                </div>
            </div>
        </div>
    </div>

    <footer class="footer">
        <div class="container">
            <p>&copy; 2025 应急响应中心管理系统 保留所有权利</p>
        </div>
    </footer>

    <script th:src="@{/lib/bootstrap/js/bootstrap.bundle.min.js}"></script>
      <script th:src="@{/js/navbar.js}"></script>
    <script th:src="@{/js/auth.js}"></script>
    <script th:src="@{/js/permission.js}"></script>
    <script th:src="@{/js/statistics.js}"></script>
</body>
</html> 
